<template>
  <div class="card-wrapper">
    <a class="card" :href="props.data.link" target="_blank">
      <div class="box">
        <div class="left">
          <el-avatar :src="props.data.logo" :size="50" />
        </div>
        <div class="right">
          <p class="t-title">{{ props.data.name }}</p>
          <span class="t-content">{{ props.data.desc }}</span>
        </div>
      </div>
    </a>
    
    <!-- 管理员模式下显示操作下拉菜单 -->
    <el-dropdown v-if="props.type === 'admin'" @command="handleCommand" class="action-dropdown">
      <el-button type="primary" size="small" circle>
        <el-icon><MoreFilled /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="update">
            <el-icon><Edit /></el-icon>
            更新
          </el-dropdown-item>
          <el-dropdown-item command="delete">
            <el-icon><Delete /></el-icon>
            删除
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue"
import type { SourceItem } from "@/types/admin/source"
import { ElMessageBox } from "element-plus"
import { MoreFilled, Edit, Delete } from "@element-plus/icons-vue"

const props = defineProps<{
  data: SourceItem
  type: "web" | "admin"
}>()

const emit = defineEmits(["update", "delete"])

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case "update":
      handleUpdate()
      break
    case "delete":
      handleDelete()
      break
  }
}

// 处理更新操作
const handleUpdate = () => {
  const item = Object.assign({}, props.data)
  emit("update", item)
}

// 处理删除操作
const handleDelete = () => {
  ElMessageBox.confirm("确定要删除该资源吗？", "删除确认", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
    center: true
  })
    .then(() => {
      emit("delete", props.data._id)
    })
    .catch(() => {
      // 用户取消删除
    })
}
</script>

<style scoped lang="scss">
.card-wrapper {
  position: relative;
  display: inline-block;
  
  .action-dropdown {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  &:hover .action-dropdown {
    opacity: 1;
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.box {
  width: 255px;
  height: 90px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 10px;
  transition: all 0.5s ease;
  
  .left {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
  }
  
  .right {
    margin-left: 10px;
    .t-title {
      font-size: 16px;
      font-weight: 600;
      color: #c244e2;
      transition: color 0.5s ease;
    }
    .t-content {
      font-size: 12px;
      line-height: 12px;
      height: 24px;
      display: -webkit-box;          /* 使用弹性伸缩盒子模型 */
      -webkit-box-orient: vertical;  /* 设置子元素垂直排列 */
      -webkit-line-clamp: 2;         /* 限制显示的行数 */
      line-clamp: 2;                 /* 标准属性，提升兼容性 */
      overflow: hidden;              /* 超出部分隐藏 */
      text-overflow: ellipsis;       /* 超出部分显示省略号 */
      color: #999;
      transition: color 0.5s ease;
    }
  }
}

.card:hover .box {
  background: #c244e2;
  transform: scale(1.1);
  overflow: hidden;
  
  .left {
    position: absolute;
    z-index: -1;
    left: 80%;
    top: 40%;
    transform: scale(2);
  }
  
  .right {
    .t-title,
    .t-content {
      color: #ffffff;
    }
  }
}
</style>
